<template name="myluck">
	<view class="bg-white" style="min-height: 100vh;padding: 0 40rpx;"
		:style="{background:'url('+Imgbase+'/kp_index_bgc1.png)','background-size':'100%',}">

		<view class="h-330" style="">
			<view class="padding-top-100">
				<image class="w-100 h-80" :src="Imgbase + '/kp_mall_title.png'" mode="aspectFit"></image>
			</view>


			<!-- tab -->
			<view class="df  margin-top-25">
				<scroll-view scroll-x class="nav w100 fff" scroll-with-animation :scroll-left="scrollLeft"
					style="height: 170upx;overflow: hidden;">
					<view class="tab_item" :class="index==seleon?'open':'no_open'" v-for="(item,index) in selename"
						:key="index" @tap="tabSelect" :data-id="index" @click="sele(index)">
						{{item}}
						<view class="w-80 h-20 heng" v-show="index==seleon">
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<!-- 列表 -->
		<view class="" style="">
			<view class="list_item w-210 h-420" v-for="(item,index) in comlist" :key="index">
				<image class="w-50 h-80 item_hot" :src="Imgbase + '/ka_mall_hot.png'" mode="aspectFit"></image>
				<image class="w-210 h-420 item_bgc" :src="Imgbase + '/ka_mall_kuang1.png'" mode="aspectFit"></image>

				<view class="w-210 text-center">
					<image class="w-130 h-180 margin-top-25" :src="item.adimage" mode="aspectFit"></image>
				</view>
				<view class="item_num fff w-50 text-center">
					{{item.stock}}
				</view>
				<view class="item_text w100 two-line font-24 fff">
					{{item.name}}
				</view>
				<view class="item_price font-22" v-if="item.price !== '0.00'">
					￥<text class="font-30">{{item.price}}</text>
				</view>
				<view class="item_price font-22" v-if="item.score > 0">
					积分: {{item.score}}
				</view>
				<view class="item_price font-22" v-if="item.price !== '0.00' && item.score > 0">
					￥<text class="font-30">69.00</text> +积分: 2
				</view>
			</view>
		</view>


		<view class="h-300">

		</view>

		<view class="w100 h-190 tabbars flex-between"
			:style="{background:'url('+Imgbase+'/kp_index_bgc.png) no-repeat','background-size':'100% 100%',}">
			<view class="padding-top-25 " @click="seletab(1)">
				<view class="w-100 h-100 text-center">
					<image :src=" Imgbase+'/kp_index_tab1.png'" mode="aspectFit" class="w-70 h-70 margin-top-30">
					</image>
				</view>
				<view class="text-center">
					首页
				</view>
			</view>
			<view class="padding-top-25 text-center" @click="seletab(2)">
				<view class="w-100 h-100 text-center">
					<image :src=" Imgbase+'/kp_index_tab2_c.png'" mode="aspectFit" class="w-100 h-100">
					</image>
				</view>
				<view class="text-center" style="color: #4FA356;">
					社区
				</view>
			</view>
			<view class="" @click="seletab(3)">
				<view class="w-200 text-center">
					<image :src=" Imgbase+'/kp_index_tab3.png'" class="w-130 h-130" mode="aspectFit"></image>
				</view>
			</view>
			<view class="padding-top-25 w-100 text-center" @click="seletab(4)">
				<view class="w-100 h-100 text-center">
					<image :src=" Imgbase+'/kp_index_tab4.png'" mode="aspectFit" class="w-70 h-70 margin-top-30">
					</image>
				</view>
				<view class="text-center">
					活动
				</view>
			</view>
			<view class="padding-top-25 w-100 text-center" @click="seletab(5)">
				<view class="w-100 h-100 text-center">
					<image :src=" Imgbase+'/kp_index_tab5.png'" mode="aspectFit" class="w-70 h-70 margin-top-30 ">
					</image>
				</view>
				<view class="text-center">
					我的
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: "myluck",
		data() {
			return {
				Imgbase: getApp().globalData.Imgbase,
				seleid: 0,
				seleon: 0,
				selename: [],
				scrollLeft: 0,
				page: 1,
				stat: 0,
				comlist: [],
				seleids: []
			};
		},
		onShow() {
			uni.hideTabBar()
			if (uni.getStorageSync('token') == '') {
				this.$uniApi.trylogin('myluck');
			}
			this.classify()
		},
		methods: {
			sele(i) {
				this.seleon = i
				this.seleid = this.seleids[i]
				this.goodlist()
			},
			tabSelect(e) {
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 70;
				this.page = 1;
				// this.list = [];
				// this.hasData = true;
			},
			// 获取分类
			async classify() {
				let _this = this
				let item = await this.$api.post('shop/classify', {
					token: uni.getStorageSync('token'),
				})
				this.selename = item.data.names
				this.seleid = item.data.ids[0]
				this.seleids = item.data.ids
				this.goodlist()
			},
			// 获取商城列表
			async goodlist() {
				let _this = this
				let item = await this.$api.post('shop/goodlist', {
					page: _this.page,
					token: uni.getStorageSync('token'),
					shop_classify_id: this.seleid
				})
				this.comlist = item.data.list
			},
			seletab(i) {
				switch (i) {
					case 1:
						uni.switchTab({
							url: '/pages/goodspoor/index'
						})
						break;
					case 2:
						uni.switchTab({
							url: '/pages/goodspoor/socity'
						})
						break;
					case 3:
						uni.switchTab({
							url: '/pages/index/kpindex'
						})
						break;
					case 4:
						uni.switchTab({
							url: '/pages/goodspoor/backpack'
						})
						break;
					case 5:
						uni.switchTab({
							url: '/pages/goodspoor/user'
						})
						break;
				}
			},
		},
		onReachBottom() {
			this.page++;
			this.goodlist()
			if (this.stat == 1) {
				this.$refs.uToast.show({
					message: '没有更多了'
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.tab_item {
		margin-right: 35rpx;
		display: inline-block;

		.heng {
			background-color: #fff;
			margin: 15rpx auto 0;
			border-radius: 15rpx;
			border: 4rpx solid #505050;
			box-shadow: 6rpx 6rpx 6rpx #3b3b3b;
		}
	}

	.open {
		font-size: 40rpx;
		text-shadow: 2px 2px 0 #000;
		font-weight: bold;
	}

	.no_open {
		font-size: 32rpx;
		text-shadow: 2px 2px 0 #000;
	}

	.list_item {
		float: left;
		margin-right: 22rpx;
		position: relative;

		.item_hot {
			position: absolute;
			z-index: 100;
			top: -30rpx;
			right: -28rpx;
		}

		.item_bgc {
			position: absolute;
			z-index: 0;
			top: 0;
			left: 0;
		}


		.item_num {
			position: absolute;
			z-index: 10;
			left: 128rpx;
			font-size: 22rpx;
			margin-top: 16rpx;
		}

		.item_text {
			position: absolute;
			z-index: 10;
			margin-top: 68rpx;
			padding: 0 8rpx;
		}

		.item_price {
			position: absolute;
			z-index: 10;
			bottom: 24rpx;
			left: 10rpx;
			color: #FBB84E;
		}
	}

	.list_item:nth-child(3n) {
		margin-right: 0rpx;
	}

	.i_large {
		width: 180rpx;
		height: 60rpx;
	}

	.i_small {
		width: 160rpx;
		height: 50rpx;
	}

	.i_larges {
		width: 210rpx;
		height: 90rpx;
	}

	.i_smalls {
		width: 190rpx;
		height: 70rpx;
	}

	.auto {
		margin: 0 auto;
	}

	button::after {
		border: initial;
	}

	.tabbars {
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 0 30rpx;
		z-index: 999999;
	}
</style>